<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">运动会奖牌</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="dal-card">
            <el-row class="dal-select">
                <div class="dal_group">
                    <el-form>
                        <el-form-item label="组别：">
                            <el-select v-model="dalgroup" @change="selGroup">
                                <el-option label="综合" :value=0></el-option>
                                <el-option v-for="item in groupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <el-col class="col-2" :span="3">
                    <el-button type="warning">统计</el-button>
                </el-col>
                <el-col class="col-3" :span="15">
                    <el-button type="primary" @click="openGradeBook">成绩册导出</el-button>
                </el-col> -->
            </el-row>

            <el-table :data="currentPageData" border stripe>
                <el-table-column prop="rank" label="名次" width="60">
                </el-table-column>
                <el-table-column prop="teamName" label="单位">
                </el-table-column>
                <el-table-column label="金牌" align="center">
                    <el-table-column prop="goldMedalMan" label="男子">
                    </el-table-column>
                    <el-table-column prop="goldMedalWoman" label="女子">
                    </el-table-column>
                    <el-table-column prop="goldMedalmix" label="混合">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="银牌" align="center">
                    <el-table-column prop="silverMedalMan" label="男子">
                    </el-table-column>
                    <el-table-column prop="silverMedalWoman" label="女子">
                    </el-table-column>
                    <el-table-column prop="silverMedalmix" label="混合">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="铜牌" align="center">
                    <el-table-column prop="bronzeMan" label="男子">
                    </el-table-column>
                    <el-table-column prop="bronzeWoman" label="女子">
                    </el-table-column>
                    <el-table-column prop="bronzemix" label="混合">
                    </el-table-column>
                </el-table-column>
                <el-table-column prop="goldMedal" label="金牌合计">
                </el-table-column>
                <el-table-column prop="silverMedal" label="银牌合计">
                </el-table-column>
                <el-table-column prop="bronze" label="铜牌合计">
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            dalgroup: 0,
            groupData: [],
            dalData: [],
            queryObj: {
                limit: 8,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
        }
    },
    created() {
        this.postGroupinfoList();
        this.getMedelinfoList();
    },
    methods: {
        async postGroupinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
            if (result.data.code == 0) {
                this.groupData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getMedelinfoList() { // 数据
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/medals/getmsg', {
                    params: {
                        grid: this.dalgroup,
                    }
                });
                if (result.data.code == 0) {
                    this.dalData = result.data.data
                    this.total = this.dalData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        openGradeBook() {
            window.open(this.$router.resolve({ path: '/resultOrderEdit' }).href, '_blank')
        },
        selGroup(){
            this.getMedelinfoList()
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.dalData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.dalData.slice(startIndex, endIndex);
        }
    }
}
</script>

<style lang="less" scoped>
.dal-card {
    margin-top: 15px;

    .dal_group {
        width: 140px;
    }
}

.col-2 {
    text-align: left;
    margin-left: 15px;
}

.col-3 {
    text-align: right;
}
.paging{
    margin-top: 15px;
}
</style>